<template>
  <main class="h-drawer">
    <el-drawer
      :title="title"
      :visible.sync="drawerVisible"
      :direction="direction"
      :before-close="handleClose"
      :wrapperClosable="false"
    >
      <slot></slot>
    </el-drawer>
  </main>
</template>

<script>
export default {
  name: 'HDrawer',
  data () {
    return {
      direction: 'rtl',
    }
  },
  props: {
    drawerVisible: {
      require: true,
      type: Boolean,
      default: () => false
    },
    title: {
      type: String,
      default: () => '工时-新增'
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:drawerVisible', false);
    }
  }
}
</script>

<style lang="scss" scoped>
.h-drawer {
  ::v-deep .el-drawer__header {
    span {
      font-size: 1.5rem;
      font-weight: 500;
      color: #000;
    }
  }
  ::v-deep .el-drawer__body {
    display: flex;
    justify-content: center;
  }
}
</style>